<template>
  <div class="app-container">

  <!-- vxe检索数据组件 -->
  <search-form  
    ref="searchForm"
    :formSearchData.sync="formSearchData"
    @searchEventEmit="searchEventEmit"
    @resetSearchEventEmit="resetSearchEventEmit"
    >
  </search-form>

  <!-- 表格组件 -->
  <ex-base-table
    ref="exBaseTable"
    :tableColumn="tableColumn"
    :tableData="tableData"
    :loading.sync="loading"
    :isVxeColSeq="false"
    :isVxeToolbar="true"
    :isVxeCheckbox="false"
    :isVxeHandleS="true"
    @handleRemoveEmit="handleRemoveEmit"
    @handleCreateEmit="handleCreateEmit"
    @handleUpdateEmit="handleUpdateEmit"
    @handleRmoveColEmit="handleRmoveColEmit"
    @customSortMethodEmit="customSortMethodEmit"
    >
  </ex-base-table>

    <!-- 分页组件 -->
  <Pagination 
    :hidden="true"
    v-show="tablePage.totalResult>0" 
    :total="tablePage.totalResult" 
    :page.sync="tablePage.currentPage" 
    :limit.sync="tablePage.pageSize" 
    @pagination="pageFindList" 
    />

    <!-- 表单提价组件 -->
    <submit-form
      ref="submitForm"
      :dialogFormVisible.sync="dialogFormVisible"
      :dialogStatus="dialogStatus"
      :formSubmitData="formSubmitData"
      @handleFromUpdateDataEmit="handleFromUpdateDataEmit"
      @handleFromCreateDataEmit="handleFromCreateDataEmit"
      @resetFormDataEmit="resetFormSubmitData"
      >
    </submit-form>

  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// import PageHeaderLayout from '@/layouts/PageHeaderLayout'
// import ApeDrawer from '@/components/ApeDrawer'
// import { mapGetters } from 'vuex'

import { 
  fetchListParamterszi, 
  addParamterszi, 
  updateParamterszi, 
  deleteParamterszi,
  } from './service/baseApi'
// 基础表格组件
import ExBaseTable from '@/components/VxeTable/ExBaseTable'
// 分页
import Pagination from '@/components/Pagination' 
// 文章表单
import SubmitForm from './components/SubmitForm'
// 检索表单
import SearchForm from './components/SearchForm'

import resetFormSubmitData from '@/views/mixins/resetFormSubmitData'

export default {
  name: 'vxe-basetable',
  mixins:[resetFormSubmitData],
  components: {
    //PageHeaderLayout,
    ExBaseTable,
    Pagination,
    SubmitForm,
    SearchForm
  },
  props:{
    /* 当前行数据 */
    currentRow:{
      type:Object,
      default(){
        return {

        }
      }
    }
  },
  // 定义属性
  data() {
    return {
        // 检索条件
        formSearchData: {
        },
        // 排除条件
        sortField:'',
        sortFlag:'',

      /* 表单相关 */
      dialogFormVisible: false, // 修改删除弹出框
      dialogStatus: '',
      // 表单数据对象
      formSubmitData: {
        id: '',
        order_num: "",
        prm_type: "",
        in_vrb_name: "",
        udt_vrb_name: "",
      },
       /* 分页相关 */
      tablePage: {
          currentPage: 1, //当前页
          pageSize: 10,  // 每一页页数
          totalResult: 0
      },
      /* 表格相关 */
        tableColumn:[], // 表格字段
        loading: false, //表格loading特效
        tableData: [],  //表格数据

        /* 子表相关 */
        DialogSonTableVisible:false,
    } //datareturn-end

  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
  },
  // 监控data中的数据变化
  watch: {
    currentRow(){
       this.findList()
    }
  },
  // 方法集合
  methods: {
    /* API数据操作相关 */
    // 查询数据
    findList() {
        this.loading = true
        // 请求表格数据
        fetchListParamterszi({
          page:this.tablePage.currentPage, // 当前页
          pageSize:this.tablePage.pageSize, // 每页条数
          sortField:this.sortField,
          sortFlag:this.sortFlag,
          m_id:this.currentRow.id,
          ...this.formSearchData,  //检索条件
          }).then(({data}) => {
            // 给表格数据赋值
            this.tableData = data.rows
            // 给分页总数赋值
            this.tablePage.totalResult = data.total
            // 关闭加载特效
            setTimeout(() => {
                this.loading = false
            }, 0.5 * 1000)
        })
    },
    /* 分页组件相关 */
    // 分页事件（页码切换，每页页数切换）
    pageFindList(){
      
      this.findList()
    },
    /* 表格组件相关 */
    // 初始化表格字段
    initTableCols(){
     const tabCols = [  //动态增加的字段 传进来的
            // { field: 'te_date', title: '生效日期', width: 200 , showOverflow: true},
            { field: 'order_num', title: '顺序', width: 300, sortable:true },
            { field: 'prm_type', title: '入参类型', width: 200 , formatter(obj){
              if (obj.cellValue == 1) {
                return "字符串"
              }else if (obj.cellValue == 2){
                return "数字"
              }else if (obj.cellValue == 3){
                return "日期"
              }else if (obj.cellValue == 4){
                return "数组"
              }
            }},
            { field: 'in_vrb_name', title: '输入变量名', width: 200 },
            { field: 'udt_vrb_name', title: '承接变量名', width: 200 },
            // { field: 'mod_us_code', title: '修改用户', width: 300 },
            // { field: 'mod_date', title: '修改时间', width: 300 },
            // { field: 'status', title: '状态', width: 300, formatter(obj){
            //   if (obj.cellValue == 0) {
            //     return "无效"
            //   }else{
            //     return "有效"
            //   }
            // } },
        ]
        this.tableColumn = tabCols;
    },
    // 表格工具组-多选删除
    handleRemoveEmit(selectRecords){
      console.log("AJAX请求删除记录");
      // this.$refs.exBaseTable.$refs.xTable.removeCheckboxRow()
       batchDeleteParamterszi({
          ...selectRecords
          }).then(({data}) => {
            this.findList()
        })
    },
    // 表格工具组-新增表单弹窗（需要表单组件）
    handleCreateEmit(type){
      // 重置表单内容
      this.resetFormSubmitData()
      this.dialogStatus = type
      this.dialogFormVisible = true
      this.$nextTick(() => {
          this.$refs.submitForm.$refs['dataForm'].clearValidate()
      })
    },
    // 行内按钮-修改数据弹窗（需要表单组件）
  handleUpdateEmit(row,type){
    console.log('formSubmitDataCom',this.formSubmitData);

      this.formSubmitData = Object.assign({}, row) // copy obj
      this.dialogStatus = type
      this.dialogFormVisible = true
      this.$nextTick(() => {
          this.$refs.submitForm.$refs['dataForm'].clearValidate()
      })
    },
    // 单行删除
    handleRmoveColEmit(row){
      console.log("AJAX 请求删除单行数据");
      // this.$refs.exBaseTable.$refs.xTable.remove(row)
       deleteParamterszi({
         id: row.id
          }).then(({data}) => {
            console.log('response:....',data);
           
            this.findList()
            // 关闭加载特效
          
        })
    },

    /* 表单组件相关 */
    // 更新
    handleFromUpdateDataEmit(){
      console.log("this.formSubmitDatathis.formSubmitDatathis.formSubmitDatathis.formSubmitData",this.formSubmitData);
      console.log("表单组件相关:此处运行更新数据操作api等");
       updateParamterszi({
          ...this.formSubmitData,  //检索条件
          
          }).then(({data}) => {
            console.log('response:....',data);
         
            this.findList()
            // 关闭加载特效
            
        })
    },
 
    // 增加
    handleFromCreateDataEmit(){
      console.log("this.formSubmitDatathis.formSubmitDatathis.formSubmitDatathis.formSubmitData",this.formSubmitData);
      console.log("表单组件相关:此处运行添加数据操作api等");
      console.log('this.currentRow',this.currentRow);
         addParamterszi({
           m_id:this.currentRow.id,
          ...this.formSubmitData,  //检索条件
          }).then(({data}) => {
            console.log('response:....',data);
        
            this.findList()
            // 关闭加载特效
         
        })
    },
  
    /* 检索相关 */
    // 检索
    searchEventEmit() {
      this.tablePage.currentPage = 1
      console.log("searchEventEmit",this.formSearchData);
      this.findList()
    },
    // 重置
    resetSearchEventEmit(){
      // 重置代码...
      console.log("resetSearchEventEmit",this.formSearchData);
      this.tablePage.currentPage = 1
      this.findList()
    },
    /* 排序 */
    customSortMethodEmit(property, order){
      this.sortField = property
      this.sortFlag = order
      console.log('触发排序emit');
      this.findList()

    },

  /* 子表格弹出 */
    viewSonTable(row){
        this.DialogSonTableVisible = true
    }




  }, //method-end
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 测试功能-下拉分页表格
    // this.keyupEvent4()
    // 初始化表格字段
    this.initTableCols()
    // 初始化表格数据
    this.findList()

    // this.findlp()

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>


  .my-dropdown4 {
    width: 600px;
    height: 300px;
    background-color: #fff;
    border: 1px solid #dcdfe6;
    box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
  }
</style>